<template>
<div>
<!--  背景-->
  <div class="background"></div>
  <!--  返回-->
  <div class="back"><van-nav-bar
      title="小小解梦"
      left-text="返回"
      left-arrow
      @click-left="goLeft"
  /></div>
<!--  搜索-->
  <van-search
      v-model="kayWord"
      show-action
      placeholder="请输入梦中的关键物！"
      @search="openDream"
  >
    <template #action>
      <div @click="openDream">搜索</div>
    </template>
  </van-search>
<!--  检索内容显示-->
  <ul >
    <li v-for="(item,index) in list" :key="index">
      <h3>{{item.name}}</h3>
      <div class="content" v-html="item.content"></div>
    </li>
  </ul>
</div>
</template>

<script>
import {dream} from "@/api/expand";
import {Toast} from "vant";

export default {
  name: "OpenDream",
  data(){
    return {
      list:[],
      kayWord:'',
      isPlay:true
    }
  },
  methods: {
    goLeft(){
      window.history.go(-1)
    },
    openDream(){
      if(this.isPlay){
        if(!(this.kayWord=="")){
          this.isPlay=false;
          dream(this.kayWord).then(res=>{
            console.log(res)
            this.list=res.result
            console.log(this.list)
          })
        }else{
          Toast.fail('请输入要检索的文字！');
        }
      }else{
        Toast.fail('测试阶段，每日限用一次！');
      }

    }
  },


}
</script>

<style scoped lang="less">
//背景
.background {
  background-image: url("../assets/images/dream1.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.2;
}
ul {
  margin: 0 10px 50px;
  .content {
    text-indent: 2em;
  }
}
</style>